<template>
	<view class="">
		<view class="w-navbar"
			:style="{'height':mixinBarHeight+'px','backgroundColor':scrollTop > 0?navScrollColor:navBackgroundColor}">
			<view class="w-status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
			<view class="w-navbar-inner" :style="{
				'marginRight' :navTitle || customNavbar?0:navbarInnerStyle.marginRight,
				'height':mixinBarHeight - statusBarHeight + 'px'
			}">

				<template v-if="customNavbar">
					<slot></slot>
				</template>


				<template v-else>
					<view v-if="navBack" @click="goBack()" class="w-navbar-back">
						<image class="" style="width: 40rpx;height: 40rpx;" src="/static/icon/public/left.png" mode="widthFix"></image>
					</view>
					<!-- <view v-if="navBack" @click="goBack()" class="custom-icon custom-icon-fanhui w-navbar-back"
						:style="{'color':navTitleColor?navTitleColor:'white'}"></view> -->
					<view v-if="navTitle" class="w-navbar-title" :style="{'color':navTitleColor?navTitleColor:'black'}">
						{{navTitle}}
					</view>
					<view v-if="$slots.navRight" class="ml-auto mr-30">
						<slot name="navRight"></slot>
					</view>
				</template>


			</view>
		</view>
		<view v-if="!navImmersive" class="" :style="{ width: '100%', height: mixinBarHeight + 'px' }"></view>
	</view>

</template>

<script setup>
	const systemInfo = uni.getSystemInfoSync();
	// 如果是小程序，获取右上角胶囊的尺寸信息，避免导航栏右侧内容与胶囊重叠(支付宝小程序非本API，尚未兼容)
	// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
	const menuButtonInfo = uni.getMenuButtonBoundingClientRect() || {}
	// #endif
	import {
		ref,
		onMounted,
		computed
	} from 'vue'


	const statusBarHeight = ref(systemInfo.statusBarHeight)

	//状态栏+导航高度
	// #ifndef MP-WEIXIN
	const mixinBarHeight = ref(44 + systemInfo.statusBarHeight)
	// #endif
	// #ifdef MP-WEIXIN
	const mixinBarHeight = ref(menuButtonInfo.bottom + menuButtonInfo.top - systemInfo.statusBarHeight)
	// #endif

	const props = defineProps({
		scrollTop: {
			default:0,
			type:Number
		}, //与顶部的距离
		navScrollColor: String, //页面滚动时改变的背景颜色
		navBackgroundColor: {
			default:'white',
			type:String
		}, //整体背景颜色
		navBack: {
			default: true,
		}, //是否允许返回
		navTitle: String, //标题文字
		navTitleColor: {
			default: 'black',
			type: String
		}, //标题文字颜色
		// 是否沉浸式，允许fixed定位后导航栏塌陷，仅fixed定位下生效
		navImmersive: {
			default: false,
			type: Boolean
		},
		customNavbar: {
			default: false,
			type: Boolean
		}
	})

	const navbarInnerStyle = computed(() => {
		let style = {};
		// // 如果是各家小程序，导航栏内部的宽度需要减少右边胶囊的宽度
		// #ifdef MP
		let rightButtonWidth = systemInfo.windowWidth - menuButtonInfo.left;
		style.marginRight = rightButtonWidth + 'px';
		// #endif
		// #ifdef H5
		style.marginRight = 0;
		// #endif
		// #ifndef MP || H5
		style.marginRight = 25 + '%';
		// #endif
		return style;
	})

	const goBack = () => {
		let pages = getCurrentPages()
		if (pages.length > 1) {
			uni.navigateBack()
		} else {
			uni.reLaunch({
				url: '/pages/index/index'
			})
		}
	}
</script>

<style scoped>
	.w-navbar {
		transition: all 0.5s;
		position: fixed;
		top: 0;
		z-index: 991;
		overflow: hidden;
	}
	
	@media screen and (min-width:960px){
		.w-navbar{
			width: 750rpx;
			left: 50%;
			transform: translateX(-50%);
		}
	}
	@media screen and (max-width:960px){
		.w-navbar{
			width: 100vw;
			left: 0;
		}
	}

	.w-status-bar {
		width: 100%;
	}

	.w-navbar-inner {
		position: relative;
		height: 100%;
		display: flex;
		position: relative;
		align-items: center;
	}

	.w-navbar-back {
		z-index: 9;
		padding: 20rpx;
	}

	.w-navbar-title {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 100vw;
		text-align: center;
		font-size: 30rpx;
		pointer-events: none;
	}

	.iconfont {
		z-index: 99;
		font-size: 40rpx;
	}
</style>